<template>
  <div class="containerBox" :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <div class="containerContent">
      <div class="title" v-if="propsData.params.useTitle == 1">
        <moduleHeader
          :propsData="propsData"
          :moduleName="propsData.params.text"
          @editModuleHeader="editModuleHeader"
        ></moduleHeader>
      </div>
      <div class="container" ref="container">
        <div
          class="picBox"
          :style="{
            height: height(propsData.params.cubeBoxHeight) * boxWidth + 'px',
            width: boxWidth + 'px',
          }"
        >
          <div
            class="pic"
            v-for="(item, index) in propsData.params.cubeCoverList"
            :key="index"
            :style="{
              top: height(item.css.top) * boxWidth + 'px',
              left: item.css.left,
              width: item.css.width,
              height: height(item.css.height) * boxWidth + 'px',
              padding: propsData.params.margin + 'px',
            }"
          >
            <img :src="item.picUrl" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";
import moduleHeader from "@/components/DiyNew/diy/baseControl/moduleHeader/index.vue";
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isMounted: false,
      boxWidth: 0,
    };
  },
  components: {
    moduleHeader,
  },
  watch: {
    "propsData.moduleCss.padding"(e) {
      this.boxWidth = this.$refs.container.offsetWidth;
    },
  },
  computed: {
    height() {
      return (height) => {
        if (height && height != "" && height != 0) {
          height = height.replace("%", "");
          height = (height - 0) / 100;
          return height;
        } else {
          return 0;
        }
      };
    },
  },
  mixins: [mixinsModuleCss],
  mounted() {
    console.log(this.propsData.params);
    this.$nextTick(() => {
      this.boxWidth = this.$refs.container.offsetWidth;
    });
  },
  methods: {
    editModuleHeader(e) {
      this.$emit("chooseMoudle", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.containerBox {
  width: 100%;
  position: relative;
}
.containerContent {
  .title {
    padding: 12px;
  }
  .container {
    width: 100%;
    .picBox {
      position: relative;
      .pic {
        position: absolute;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
</style>